import React from 'react';
import HTMLFlipBook from 'react-pageflip';
import "./bootstrap.min.css";
import "./index.css"

import { request } from '../../request';

const Page = React.forwardRef((props, ref) => {
    return (
        <div className="demoPage" ref={ref}>
            <p>{props.children}</p>
            <p>第 {props.number} 页</p>
        </div>
    );
});

const bgStyle = { paddingLeft: "50%", marginLeft: "-500px", textAlign: "center" }

class index extends React.Component {

    state = {
        journal: {}
    }

    componentDidMount() {
        const journalId = this.props.match.params.id;
        // 请求该页面的详情数据
        request({
            url: `/journal/detail/${journalId}`,
            method: 'GET'
        }).then(res => {
            console.log(res.data);
            this.setState({
                journal: res.data
            })
        })
    }

    render() {
        return (
            <div className="wrapper">
                <HTMLFlipBook width={500} height={650} style={bgStyle}>
                    <div className="page page-cover page-cover-top" data-density="hard">
                        <div className="page-content">
                            <h2>Daily Life</h2>
                            <h3>My Diary, My Life</h3>
                        </div>
                    </div>
                    <div className="page">
                        <Page number="1" className="page-content">
                            <div className="page-image"><img src={this.state.journal.userImg} alt='' /></div>
                            <div>{this.state.journal.createDate}</div>
                            <div className="page-text">
                                {this.state.journal.content}
                            </div>
                        </Page>
                    </div>
                    <div className="page page-cover page-cover-bottom" data-density="hard">
                        <div className="page-content">
                            <h2>THE END</h2>
                        </div>
                    </div>
                </HTMLFlipBook>
            </div>
        );
    }
}

export default index;